<template>
	<view :style="objColor">
		<view v-if="loadingData">
			<view class="customer">
				<view v-if="list">
					<view class="customer-list" v-if="list.length > 0">
						<p>问题反馈</p>
						<view class="list-in">
							<view :data-index="index" :data-id="item.value" @tap="naviFeedBack" v-if="index < 8"
								v-for="(item, index) in list" :key="index">
								<view v-if="item.icon">
									<image :src="item.icon"></image>
									<view>{{ item.name }}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 帮助中心 -->
					<view class="help" v-if="helpList.length > 0">
						<view class="help-wai">
							<p class="help-text">帮助中心</p>
							<view class="help-in" :data-index="index" v-if="item.list.length > 0"
								v-for="(item, index) in helpList" :key="index">
								<view class="help-title">{{ item.typeName }}</view>

								<view class="help-list" :animation="inner" :data-index="index">
									<view :data-index="idx" @tap="naviCustomer" class="list-hang"
										:data-content="itemIdx.content" v-if="idx < 2 && !item.select"
										:data-title="itemIdx.title" :data-time="itemIdx.createTime"
										:data-name="item.typeName" :data-id="itemIdx.id"
										:data-num="itemIdx.readingQuantity" v-for="(itemIdx, idx) in item.list"
										:key="itemIdx.idx">
										<image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/question.png"></image>

										<p class="yichu">{{ itemIdx.title }}</p>

										<image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/turn.png"></image>
									</view>
									<view :data-index="idx" @tap="naviCustomer" class="list-hang"
										:data-content="itemIdx.content" v-if="item.select" :data-title="itemIdx.title"
										:data-time="itemIdx.createTime" :data-name="itemIdx.typeName"
										v-for="(itemIdx, idx) in item.list" :key="itemIdx.idx">
										<image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/question.png"></image>

										<p class="yichu">{{ itemIdx.title }}</p>

										<image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/turn.png"></image>
									</view>
								</view>

								<view class="select-wrap" @tap="select" :data-select="item.select" :data-index="index"
									v-if="item.list.length > 2">
									<image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/selectdown.png" class="select" v-if="item.select">
									</image>
									<image src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/selectup.png" class="select" v-if="!item.select">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<Upgrading text="暂无数据"></Upgrading>
				</view>
				<!-- 问题反馈 -->
				<!-- 底部按钮 -->
				<view class="feed-btn">
					<view class="myFeedBack" @tap="naviMyFeedBack">我的反馈</view>
					<view class="mobile" @tap="showCustomerFun">电话客服</view>
				</view>
			</view>
		</view>

		<!-- 联系客服 -->
		<uni-popup ref="alertDialog" type="dialog">
			
			<uni-popup-dialog  type="info" cancelText="取消" confirmText="呼叫" title="温馨提示"  @confirm="call"
			@close="onCloseCustomer">
			<view>
				<view class="info"><view class="infoTitle">联系客服：</view><text class="infoValue">{{ serviceInfo.telephone }}</text></view>
				<view class="info"><view class="infoTitle">工作时间：</view>{{ serviceInfo.serviceTime }}</view>
			</view>
			<!-- <view class="customerBtn">
				<view class="btn1" @tap="onCloseCustomer">取消</view>
				<view class="btn2" @tap="call">呼叫</view>
			</view> -->
		</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	// pages/customer/customer.ts
	'use strict';
	import Upgrading from '../../../components/upgrading/upgrading';
	const newapp = getApp()
	var https_1 = require('../../../api/https');

	export default {
		components: {
			Upgrading
		},
		data() {
			return {
				loading: true,

				list: [{
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/1.png',
						name: '投诉'
					},
					{
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/2.png',
						name: '建议'
					},
					{
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/3.png',
						name: '售后'
					},
					{
						icon: 'https://oos-cn.ctyunapi.cn/front-end/static/mine/images/4.png',
						name: '其他'
					}
				],

				help: [],
				initIndex: 2,
				selectFlag: false,
				currentIndex: 0,
				phone: 17779248757,

				serviceInfo: {
					telephone: '',
					serviceTime: ''
				},

				inner: '',
				openFlag: false,

				clone$item: {
					open: false
				},

				loadingData: false,
				helpList: []
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {},
		created: function() {
			this.getFeedbackDict();
			this.getHelpExampleDate();
			this.getRefundAmount();
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			// 获取反馈字典
			getFeedbackDict: function() {
				uni.showLoading({
					title: '加载中',
				});
				var that = this;
				https_1.getFeedbackDict({ sellerId: newapp.globalData.sellerId }).then(function(res) {
					that.setData({
						list: res.data,
						loadingData: true
					});
					uni.hideLoading();
					uni.setStorageSync('feedbackDictList', res.data);
				});
			},
			open: function(e) {
				var that = this;
				var $item = e.currentTarget.dataset.item; //数组

				var $chang = $item.list.length; //列表长度

				var box = uni.createAnimation($item.option); //初始化animation

				var hei = 40 * $chang; //可设置动态获取高度

				box.height(hei).step(); //设置动画效果

				that.setData({
					inner: box['export'](),
					openFlag: true,
					'$item.open': false
				});
			},
			close: function(e) {
				var that = this;
				var $item = e.currentTarget.dataset.item; //数组

				var box = uni.createAnimation($item.option); //初始化animation

				box.height(80).step();
				that.setData({
					inner: box['export'](),
					openFlag: false,
					'$item.open': true
				});
			},
			naviFeedBack: function(e) {
				var feedbackVarietyId = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../../pages/problemFeedback/problemFeedback?feedbackVarietyId=' + feedbackVarietyId
				});
			},
			naviMyFeedBack: function() {
				// uni.navigateTo({
				// 	url: '../../pages/myFeedback/myFeedback'
				// });

				getApp().globalData.CHECK_LOGIN_Toast(()=>{
					uni.navigateTo({
						url: '../../pages/myFeedback/myFeedback'
					});
				},'请先进行登录!')
			},
			naviCustomer: function(e) {
				var that = this;
				var content = e.currentTarget.dataset.content;
				var title = e.currentTarget.dataset.title;
				var time = e.currentTarget.dataset.time;
				var name = e.currentTarget.dataset.name;
				var id = e.currentTarget.dataset.id;
				var num = e.currentTarget.dataset.num;
				console.log(e.currentTarget.dataset.num,'度')
				newapp.globalData.richText = content
				uni.navigateTo({
					url: '../../pages/customerService/customerService?title=' + title + '&createTime=' + time +'&typeName=' + name + '&num=' + num
				});
				that.addReadingQuantity(id)
			},
			addReadingQuantity:function(id){
			            https_1.addReadingQuantity(id).then(function(res){
							console.log("打印addReadingQuantity方法",res.code)
			               if(res.code == 0){

			               }
			            })
			        },
			select: function(e) {
				var length = e.currentTarget.dataset.length;
				var index = e.currentTarget.dataset.index;
				this.setData({
					selectFlag: !this.selectFlag,
					currentIndex: index
				});

				if (this.selectFlag) {
					this.setData({
						initIndex: length
					});
				} else {
					this.setData({
						initIndex: 2
					});
				}
			},
			showCustomerFun: function() {
				this.$refs.alertDialog.open()
				
			},
			//客服电话
			call: async function() {
				this.$refs.alertDialog.close()
				//#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
					if (result !== 1){
						return
					}else{
						uni.makePhoneCall({
							phoneNumber: this.serviceInfo.telephone
						});
					}    
				//#endif
				//#ifdef MP-WEIXIN || MP-ALIPAY
					uni.makePhoneCall({
						phoneNumber: this.serviceInfo.telephone
					});
				//#endif
			},
			getHelpExampleDate: function() {
				var that = this;
				https_1
					.getHelpExampleDate({ sellerId: newapp.globalData.sellerId })
					.then(function(res) {
						if (res.code == 0) {
							that.setData({
								help: res.data
							})
							var helpArr = res.data
							helpArr.forEach(function(element) {
								element.select = false
							});
							that.setData({
								helpList: helpArr
							})
						}
					})['catch'](function(err) {
						console.log(err);
					});
			},
			getRefundAmount: function() {
				var that = this;
				https_1.getStyleConfig( newapp.globalData.sellerId ).then(function(res) {
					console.log(res.data,'获取客服电话..')
					if (res.code == 0) {
						that.setData({
							serviceInfo: res.data
						});
					}
				});
			},
			onCloseCustomer: function() {
				this.$refs.alertDialog.close()
			}
		}
	};
</script>
<style lang="less">
	@import url('./customer.less');
</style>
